<script setup lang="ts">
import { ref, reactive } from "vue";
import { graphic } from "echarts/core";
import { ElMessage } from "element-plus"

const totalNum = ref(1000);
// 班次产量数据（示例数据，可替换为实际数据）
const shiftData = [
  {
    shift: '07:00-15:00', // 班次名称
    ok: 1850, // OK产量
    ng: 150 // NG产量
  },
  {
    shift: '15:00-23:00',
    ok: 1780,
    ng: 120
  },
  {
    shift: '23:00-07:00',
    ok: 1620,
    ng: 80
  }
];

const option = ref({});
// 处理数据为环形图所需格式（name: 数据项名称, value: 数值, itemStyle: 颜色）
const processChartData = () => {
  // 颜色配置：同班次OK/NG用同色系，OK偏浅、NG偏深
  const colorMap = [
    { ok: 'rgba(252,144,16,0.7)', ng: 'rgba(252,144,16,0.9)' }, // 早班：橙色系
    { ok: 'rgba(9,202,243,0.7)', ng: 'rgba(9,202,243,0.9)' }, // 中班：蓝色系
    { ok: 'rgba(72,187,120,0.7)', ng: 'rgba(72,187,120,0.9)' } // 晚班：绿色系
  ];

  return shiftData.flatMap((item, index) => [
    {
      name: `${item.shift}-OK`,
      value: item.ok,
      itemStyle: { color: colorMap[index].ok }
    },
    {
      name: `${item.shift}-NG`,
      value: item.ng,
      itemStyle: { color: colorMap[index].ng }
    }
  ]);
};



const setOption = () => {
  option.value = {
    title: {
      top: "center",
      left: "center",
      text: [`{value|${totalNum.value}}`, "{name|总数}"].join("\n"),
      textStyle: {
        rich: {
          value: {
            color: "#ffffff",
            fontSize: 24,
            fontWeight: "bold",
            lineHeight: 20,
            padding: [4, 0, 4, 0]
          },
          name: {
            color: "#ffffff",
            lineHeight: 20,
          },
        },
      },
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, .8)",
      textStyle: {
        color: "#FFF",
      },
    },
    series: [
      {
        name: "班次生产统计",
        type: "pie",
        radius: ["40%", "70%"],
        //avoidLabelOverlap: true,
        itemStyle: {
          borderRadius: 6,
          borderColor: "rgba(255,255,255,0)",
          borderWidth: 2,
        },
        label: {
          show: true,
          formatter: "{b|{b}}\n{c|{c}件} {per|{d}%}",
          //position: "outside",
          rich: {
            b: {
              color: "#fff",
              fontSize: 12,
              lineHeight: 26,
            },
            c: {
              color: "#31ABE3",
              fontSize: 14,
            },
            per: {
              color: "#31ABE3",
              fontSize: 14,
            },
          },
        },
        emphasis: {
          show: false,
        },
        legend: {
          show: false,
        },
        tooltip: { show: true },
        labelLine: {
          show: true,
          length: 20, // 第一段线 长度
          length2: 36, // 第二段线 长度
          smooth: 0.2,
          lineStyle: {},
        },
        data: processChartData() // 传入处理后的数据集
      },
    ],
  };
};


const getData = () => {
  // countUserNum().then((res) => {
  //   console.log("左中--用户总览",res);
  //   if (res.success) {
  setOption();
  //   }else{
  //     ElMessage.error(res.msg)
  //   }
  // }).catch(err=>{
  //   ElMessage.error(err)
  // });
};
getData();


</script>

<template>
  <VueEcharts class="chart" :option="option" />
</template>

<style scoped lang="scss"></style>
